<template>
  <div>
    <ul>
      <li v-for="(msg) in messages" :key="msg.id">{{ msg.title }}
        <a href="#">{{ msg.title }}</a>
<!--        <router-link :to="`/home/message/detail/${msg.id}`">to</router-link>-->
        <button @click="pushShow(msg.id)">push查看</button>
        <button @click="replaceShow(msg.id)">replace查看</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      messages: []
    }
  },
  mounted () {
    // 模拟异步请求数据
    // setTimeout(() => {
    const messages = [
      {title: 'message001', id: '1'},
      {title: 'message002', id: '2'},
      {title: 'message003', id: '3'}
    ]
    this.messages = messages
    // }, 2000)
  },
  methods: {
    pushShow (id) {
      /*
       字符串
       this.$router.push('/home/first')
        对象
        this.$router.push({ path: '/home/first' })
         命名的路由
       this.$router.push({ name: 'home', params: { userId: wise }})
       */
      this.$router.push(`/home/message/detail/${id}`)
    },
    replaceShow (id) {
      /*
      1.this.$router.push()
      描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
      2.this.$router.replace()
      描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
      */
      this.$router.replace(`/home/message/detail/${id}`)
    }
  }
}
</script>

<style scoped>

</style>
